<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="showType=='taskList'">
        <el-row style="margin-left: -10px;margin-right: -10px">
          <el-col :span="4" style="padding: 10px">
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div class="job-inf-title">
                今日待处理
                <el-tooltip class="item" effect="dark" content="周期任务" placement="bottom">
                  <i style="margin-left: 3%" class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="job-inf-value">
                <span>
                  <vns style="margin-bottom:30px;" :start="0" :end="topData.cycleTaskTodoCount" :times="20"
                       :speed="50"/>
                </span>
                <img src="@images/todoRun.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" style="padding: 10px">
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div class="job-inf-title">
                今日处理中
                <el-tooltip class="item" effect="dark" content="周期任务" placement="bottom">
                  <i style="margin-left: 3%" class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="job-inf-value">
                <span>
                  <vns style="margin-bottom:30px;" :start="0" :end="topData.cycleTaskRunningCount" :times="20"
                       :speed="50"/>
                </span>
                <img src="@images/running.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" style="padding: 10px">
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div class="job-inf-title">
                今日已成功
                <el-tooltip class="item" effect="dark" content="周期任务" placement="bottom">
                  <i style="margin-left: 3%" class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="job-inf-value">
                <span>
                  <vns style="margin-bottom:30px;" :start="0" :end="topData.cycleTaskSuccessCount" :times="20"
                       :speed="50"/>
                </span>
                <img src="@images/runSuccess.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" style="padding: 10px">
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div class="job-inf-title">
                今日已失败
                <el-tooltip class="item" effect="dark" content="周期任务" placement="bottom">
                  <i style="margin-left: 3%" class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="job-inf-value">
                <span>
                  <vns style="margin-bottom:30px;" :start="0" :end="topData.cycleTaskFailCount" :times="20"
                       :speed="50"/>
                </span>
                <img src="@images/runFail.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" style="padding: 10px">
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div class="job-inf-title">
                历史成功
                <el-tooltip class="item" effect="dark" content="周期任务" placement="bottom">
                  <i style="margin-left: 3%" class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="job-inf-value">
                <span>
                  <vns style="margin-bottom:30px;" :start="0" :end="topData.cycleTaskSuccessTotalCount" :times="20"
                       :speed="50"/>
                </span>
                <img src="@images/history.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" style="padding: 10px">
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div class="job-inf-title">
                历史失败
                <el-tooltip class="item" effect="dark" content="周期任务" placement="bottom">
                  <i style="margin-left: 3%" class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="job-inf-value">
                <span>
                  <vns style="margin-bottom:30px;" :start="0" :end="topData.cycleTaskFailTotalCount" :times="20"
                       :speed="50"/>
                </span>
                <img src="@images/fail.png">
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div slot="header" class="clearfix">
          <span>周期任务实例列表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation :permission="permission" :defaultQueryForm="defaultQueryForm" :moreQueryList="moreQueryList"/>
        </div>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
                  @select="crud.selectChange"
                  @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
                  @filter-change="crud.handleFilterChange"
                  @row-dblclick="goTaskInfo" @cell-mouse-enter="showTooltip" @cell-mouse-leave="hideTooltip"
                  :header-cell-style="{background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
          <el-table-column type="selection"/>
          <el-table-column v-if="columns.visible('bizDate')" prop="bizDate" label="业务日期" min-width="80">
            <template slot-scope="scope">
              <i class="el-icon-time" v-if="scope.row.bizDate"></i>
              <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('taskCode')" :show-overflow-tooltip="true" prop="taskCode"
                           label="任务名称(编码)"
                           min-width="200" :formatter="formattertaskName"/>
          <el-table-column v-if="columns.visible('jobCode')" prop="jobCode" :show-overflow-tooltip="true" label="作业编码"
                           min-width="180"/>
          <el-table-column v-if="columns.visible('resNum')" prop="resNum" :show-overflow-tooltip="true" label="资源数"
                           min-width="100"/>
          <el-table-column v-if="columns.visible('shellPath')" prop="shellPath" label="执行文件" min-width="160"
                           :show-overflow-tooltip="true"/>
          <el-table-column v-if="columns.visible('taskStatus')" prop="taskStatus" label="任务状态" key="taskStatus"
                           filter-placement="bottom-end" :filter-multiple="false" min-width="80"
                           column-key="taskStatus">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.taskStatus!='3'" size="medium"
                      :type="formatterTaskStatusType(scope.row.taskStatus)">
                {{ formatterTaskStatus(scope.row.taskStatus) }}
              </el-tag>
              <el-tag v-if="scope.row.taskStatus=='3'" class="tag-st" size="medium">
                {{ formatterTaskStatus(scope.row.taskStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('execStTs')" prop="execStTs" label="开始执行时间" min-width="120"/>
          <el-table-column v-if="columns.visible('execEndTs')" prop="execEndTs" label="执行结束时间" min-width="120"/>
          <el-table-column v-if="columns.visible('costTs')" prop="costTs" label="耗时" min-width="80"/>
          <el-table-column v-if="columns.visible('upTs')" prop="upTs" label="更新时间" min-width="120"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <!-- 悬浮提示 -->
              <el-tooltip placement="bottom-end" v-model="scope.row.showTooltip" :open-delay="500" effect="light"
                          :disabled="!scope.row.showTooltip">
                <!-- 注意 显示单元格浮框时 v-model 和 disabled 属性要一起使用才有效果 -->
                <div slot="content">双击当前行点开详情</div>
                <div><i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.upTs }}</span></div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('crtTs')" prop="crtTs" label="创建时间" min-width="120"/>
        </el-table>
      </el-card>
      <!--任务实例详情-->
      <el-card class="box-card" style="padding-bottom: 30px" v-if="showType=='components'">
        <div slot="header" class="clearfix">
          <div class="el-page-header">
            <div class="el-page-header__left" @click="goBack()">
              <i class="el-icon-back"></i>
              <div class="el-page-header__title">返回</div>
            </div>
            <div class="el-page-header__content">周期任务详情</div>
          </div>
        </div>
        <div class="task-infor">
          <el-tabs v-model="crud.activeName" @tab-click="handleClick">
            <el-tab-pane label="任务详情" name="first">
              <span slot="label">任务详情</span>
              <el-form ref="jobForm" :inline="true" label-position="left" :model="jobForm" label-width="240px">
                <el-col :span="24" style="padding: 30px;min-height: 360px">
                  <div>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="作业编码" prop="jobCode">
                          <el-input v-model="jobForm.jobCode" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一编码，周期作业编码
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="任务编码" prop="taskCode">
                          <el-input v-model="jobForm.taskCode" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一编码，周期任务编码
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="任务名称" prop="taskName">
                          <el-input v-model="jobForm.taskName" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            周期任务名称
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="业务日期" prop="bizDate">
                          <el-input :disabled="true" v-model="jobForm.bizDate"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业执行的业务日期
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="执行文件" prop="shellPath">
                          <el-input v-model="jobForm.shellPath" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            shell脚本路径
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="外部参数" prop="extParam">
                          <el-input v-model="jobForm.extParam" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            shell脚本参数
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="任务状态" prop="taskStatus">
                          <el-select v-model="jobForm.taskStatus" style="width: 400px" :disabled="true">
                            <el-option v-for="(item,i) in this.dict.task_status" :key="i" :label="item.label"
                                       :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            任务执行的状态
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="创建任务时间" prop="crtTs">
                          <el-date-picker :disabled="true" v-model="jobForm.crtTs" type="datetime"
                                          placeholder="选择创建任务时间">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            创建任务的时间
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="更新时间" prop="upTs">
                          <el-date-picker :disabled="true" v-model="jobForm.upTs" type="datetime" placeholder="选择更新时间">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            任务更新的时间
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="任务是否结束" prop="isEndTask">
                          <el-select v-model="jobForm.isEndTask" clearable placeholder="请选择" :disabled="true"
                                     style="width: 400px">
                            <el-option v-for="(item,i) in this.dict.is_order" :key="i" :label="item.label"
                                       :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            任务是否执行结束
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="批次标签" prop="batchTag">
                          <el-input v-model="jobForm.batchTag" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一编码，任务导入批次号
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="出错次数" prop="errCount">
                          <el-input v-model="jobForm.errCount" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            任务执行出错次数
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="允许的出错次数" prop="allowErrCount">
                          <el-input v-model="jobForm.allowErrCount" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            允许发送节点失败次数
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="资源数" prop="resNum">
                          <el-input v-model="jobForm.resNum" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            任务所占资源数，默认为5，特殊大作业增大数值
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="优先级" prop="priorityLevel">
                          <el-input v-model="jobForm.priorityLevel" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            优先级数值越大，优先执行
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="应用编码" prop="appCode">
                          <el-input v-model="jobForm.appCode" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一编码，应用编码
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="执行节点编码" prop="agentCode">
                          <el-input v-model="jobForm.agentCode" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一编码，执行任务的节点编码
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="指定节点编码" prop="appointAgentCode">
                          <el-input v-model="jobForm.appointAgentCode" style="width: 400px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一编码，指定执行任务的节点编码
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>

                  </div>
                </el-col>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="任务执行日志" name="second">
              <el-input v-model="jobForm.taskExecLog" :disabled="true" type="textarea" style="width : 100%"
                        :autosize="{ minRows: 30, maxRows: 50}"/>
            </el-tab-pane>
            <el-tab-pane label="任务依赖图" name="four">
              <taskDepend v-if="crud.activeName==='four'" :jobCode="jobCode" :bizDate="bizDate" :taskCode="taskCode" :type="type"  ref="taskDepend"
                         :params-task-name="taskName"/>
            </el-tab-pane>
            <el-tab-pane label="任务执行统计" name="five">
              <cycletaskEchars v-if="crud.activeName==='five'" :taskCode="this.taskCode"/>
            </el-tab-pane>
            <el-tab-pane label="任务跑批记录" name="six">
              <cycleTaskStream v-if="crud.activeName==='six'" :taskCode="this.taskCode" :bizDate="bizDate"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>

      <!--修改-->
      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
                 :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="480px">
        <el-form ref="form" :inline="true" :model="form" size="small" label-width="160px">
          <el-row>
            <el-form-item label="运行状态">
              <el-select v-model="form.taskStatus" filterable placeholder="请选择">
                <el-option v-for="(item,i) in editTaskStatusOptions" :key="i" :label="item.label" :value="item.value"
                           :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button icon="el-icon-document-delete" @click="crud.cancelCU">取消</el-button>
          <el-button icon="el-icon-document-add" :loading="crud.status.cu === 2" type="primary" @click="submitCU">保存
          </el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import api from '@/api/app/appInf'
import task from '@/api/cycleJob/task'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/cycleTask/cycleTask/app/CRUD.operation'
import cycletaskEchars from './cycletaskEchars'
import cycleTaskStream from './cycleTaskStream'
import taskDepend from "./taskDepend"
import vns from 'vue-number-scroll'
import config from '@/settings'

const isDefBizDate = config.isDefBizDate
const dateOffset = config.dateOffset
//默认去查询
const queryList = [{
  'cloumValue': 'taskNameFuzzy',
  'cloumName': '任务名称'
}, {
  'cloumValue': 'taskCodeFuzzy',
  'cloumName': '任务编码'
}]
const defaultCrud = CRUD({
  title: '周期任务实例',
  url: 'api/periodTask',
  queryList: queryList,
  sort: 'sort,asc',
  queryOnPresenterCreated: false,
  crudMethod: {
    ...task
  }
})
const defaultForm = {}
const tableColumnOptions = [];
export default {
  name: 'appTask',
  components: {
    crudOperation,
    taskDepend,
    cycletaskEchars,
    cycleTaskStream,
    vns,
    config
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['AGENT_STATUS', 'agent_ha_status', 'task_status', 'is_order'],
  data() {
    return {
      jobCode: null,
      taskCode: null,
      taskName: null,
      bizDate: '',
      type: 'example',
      permission: {
        edit: ['appTask:edit']
      },
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      checkAll: true,
      tableColumns: tableColumnOptions,
      isIndeterminate: true,
      qryParam: '',
      qryCloum: '',
      showQryParamFlag: false,
      addDialog: false,
      from: {
        agentName: '',
        agentIp: '',
        agentPort: '',
        concurrentNum: '',
        resNum: '',
        serverVer: '',
        agentDesc: ''
      },
      topData: {
        cycleJobTodoRun: 0,
        cycleJobRunning: 0,
        cycleJobSuccess: 0,
        cycleJobFail: 0,
        cronTaskTodoRun: 0,
        cycleTaskTodoCount: 0,
        cronTaskRunning: 0,
        cronTaskSuccess: 0,
        cronTaskFail: 0,
        cycleJobSuccessTotal: 0,
        cycleJobFailTotal: 0,
        cronTaskSuccessTotal: 0,
        cronTaskFailTotal: 0,
        cycleTaskTodoTotalCount: 0,
        cycleTaskRunningTotalCount: 0,
        cycleTaskSuccessTotalCount: 0,
        cycleTaskFailTotalCount: 0,
        cronTaskSuccessTotalCount: 0,
        cronTaskFailTotalCount: 0
      },
      rules: {
        agentName: [{
          required: true,
          message: '请输入节点称',
          trigger: 'blur'
        },],
        agentIp: [{
          required: true,
          message: '请输入节点IP',
          trigger: 'blur'
        }],
        agentPort: [{
          required: true,
          message: '请输入节点端口号',
          trigger: 'blur'
        }],
        concurrentNum: [{
          required: true,
          message: '请输入当前连接数',
          trigger: 'blur'
        }],
        resNum: [{
          required: true,
          message: '请输入当前资源数',
          trigger: 'blur'
        }],
        agentCode: [
          //{ required: true, message: '请输入节点编码', trigger: 'blur' }
        ]
      },
      statusOptions: [{
        key: "1",
        value: "启动"
      }, {
        key: "2",
        value: "停用"
      }],
      uuidA: '',
      detailShow: false,
      time: '30',
      isSave: false,
      isTestCon: false,
      showType: 'taskList',
      jobForm: {},
      taskDict: [],
      taskStatusDict: [],
      editTaskStatusOptions: []
    }
  },
  computed: {
    calculate() {
      return parseInt(this.topData.cycleTaskTodoTotalCount) - parseInt(this.topData.cycleTaskTodoCount);
    }
  },
  created() {
    this.initQry()
    this.findPeriodTaskCountTopData();
    this.findHisTaskRunInfCurrentApp();
    this.taskDict = this.dict.task_status;
  },
  watch: {
    taskDict() {
      this.$nextTick(() => {
        this.taskDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.taskStatusDict.push(obj);
          var option = {
            value: item.value,
            label: item.label
          }
          if (item.value == "2" || item.value == "4" || item.value == "5") {
            option.disabled = true
          }
          this.editTaskStatusOptions.push(option);
        })
      })
    },

  },
  methods: {
    [CRUD.HOOK.afterRefresh](crud) {
      this.findPeriodTaskCountTopData();
      this.findHisTaskRunInfCurrentApp();
    },
    submitCU() {
      this.crud.status.edit = CRUD.STATUS.PROCESSING;
      var taskParamList = this.crud.form.selections
      for (var i = 0; i < taskParamList.length; i++) {
        taskParamList[i].taskExecLog = null
        taskParamList[i].taskTrackMap = null
        taskParamList[i].trackJson = null
      }
      console.log(taskParamList)
      let formData = {
        periodTaskList: taskParamList,
        taskStatus: this.form.taskStatus
      };
      console.log('表单信息')
      task.batchChangeStatus(formData)
        .then((res) => {
          this.crud.status.edit = CRUD.STATUS.NORMAL;
          this.crud.editType.changeStatus = false;
          this.crud.resetForm();
          this.crud.refresh();
          let msg = '更新【' + res.upCount + '】个任务,成功【' + res.successCount + '】个！';
          this.crud.notify(msg, CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
        .catch(() => {
          this.crud.status.edit = CRUD.STATUS.PREPARED;
        });
    },
    initQry() {
      this.crud.toQuery()
    },
    formatterTaskStatusType(val) {
      const type = ['', 'info', 'primary', '', 'success', 'danger', 'warning']
      return type[val]
    },
    formatterTaskStatus(val) {
      return this.dict.label.task_status[val]
    },
    formattertaskName(val) {
      return val.taskName + "(" + val.taskCode + ")"
    },
    findPeriodTaskCountTopData() {
      api.findPeriodTaskCountTopData().then(response => {
        for (var i in response) {
          response[i] = Number(response[i])
        }
        this.topData = response
      })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findHisTaskRunInfCurrentApp() {
      api.findHisTaskRunInfCurrentApp().then(response => {
        for (var i in response) {
          response[i] = Number(response[i])
        }
        this.topHisData = response
      })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    handleClick(tab, event) {

    },
    goTaskInfo(row, column, event) {
      this.showType = 'components'
      this.jobForm = row;
      this.bizDate = row.bizDate;
      this.jobCode = row.jobCode;
      this.taskCode = row.taskCode;
      this.taskName = row.taskName
    },
    //进入时显示提示框
    showTooltip(row) {
      //需要显示浮框的条件
      row.showTooltip = true;
    },
    //退出时隐藏提示框
    hideTooltip(row) {
      row.showTooltip = false;
    },
    goBack() {
      this.showType = 'taskList'
      this.crud.activeName = 'first'
      this.crud.refresh()
    },
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
  }
}
</script>
<style scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;
}

.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.tag-st {
  background-color: rgb(255, 170, 127, 0.1);
  border: #ffffff;
  color: rgb(255, 170, 127);
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.job-inf-title {
  padding-top: 10px;
  padding-left: 10px;
  /*font-weight: 600;*/
}

.job-inf-value {
  padding: 10px;
  font-size: 20px;
}

.job-inf-value span {
  position: relative;
  top: 0px;
}

.job-inf-value img {
  width: 40px;
  height: 40px;
  padding-bottom: 10px;
  float: right;
}
</style>
